import { PoThemeA11yEnum } from '../../services';
import { poLocaleDefault } from '../../services/po-language/po-language.constant';
import { PoLanguageService } from '../../services/po-language/po-language.service';
import * as Utils from '../../utils/util';
import { poSearchLiteralsDefault, poSearchLiteralsDefaultExecute } from './literals/po-search-literals-default';
import { PoSearchBaseComponent } from './po-search-base.component';

describe('PoSearchBaseComponent', () => {
  let component: PoSearchBaseComponent;

  beforeEach(() => {
    component = new PoSearchBaseComponent(new PoLanguageService());
  });

  it('should create an instance', () => {
    expect(component).toBeTruthy();
  });

  describe('Properties:', () => {
    it('label: should set label when is setted', () => {
      component['language'] = 'en';
      component.ariaLabel = 'Search';

      expect(component.ariaLabel).toBe('Search');
    });

    it('label: should concat label with literals', () => {
      component['language'] = 'en';
      component.ariaLabel = 'label button';
      expect(component.ariaLabel).toBe('label button Search');
    });

    it('should be set `literals` with browser language if `literals` is `undefined`', () => {
      component['language'] = Utils.getShortBrowserLanguage();
      component.literals = undefined;

      expect(component.literals).toEqual(poSearchLiteralsDefault[Utils.getShortBrowserLanguage()]);
    });

    it('should be in portuguese if browser is set with `pt`.', () => {
      component['language'] = 'pt';

      component.literals = {};

      expect(component.literals).toEqual(poSearchLiteralsDefault[poLocaleDefault]);
    });

    it('should be in english if browser is set with `en`.', () => {
      component['language'] = 'en';

      component.literals = {};

      expect(component.literals).toEqual(poSearchLiteralsDefault.en);
    });

    describe('literals with type execute', () => {
      const expected = {
        ...poSearchLiteralsDefault.en,
        ...poSearchLiteralsDefaultExecute.en
      };

      beforeEach(() => {
        component.type = 'execute';
        component['language'] = 'en';
      });

      it('should be in english if browser is set with `en`', () => {
        component.literals = {};

        expect(component.literals).toEqual(expected);
      });

      it('should be set `literals` with browser language if `literals` is `undefined`', () => {
        component.literals = undefined;

        expect(component.literals).toEqual(expected);
      });

      it('should return the literal when not set', () => {
        expect(component.literals).toEqual(expected);
      });
    });

    describe('p-size', () => {
      beforeEach(() => {
        document.documentElement.removeAttribute('data-a11y');
        localStorage.removeItem('po-default-size');
      });

      afterEach(() => {
        document.documentElement.removeAttribute('data-a11y');
        localStorage.removeItem('po-default-size');
      });

      it('should set property with valid values for accessibility level is AA', () => {
        document.documentElement.setAttribute('data-a11y', PoThemeA11yEnum.AA);

        component.size = 'small';
        expect(component.size).toBe('small');

        component.size = 'medium';
        expect(component.size).toBe('medium');
      });

      it('should set property with valid values for accessibility level is AAA', () => {
        document.documentElement.setAttribute('data-a11y', PoThemeA11yEnum.AAA);

        component.size = 'small';
        expect(component.size).toBe('medium');

        component.size = 'medium';
        expect(component.size).toBe('medium');
      });

      it('should return small when accessibility is AA and getA11yDefaultSize is small', () => {
        document.documentElement.setAttribute('data-a11y', PoThemeA11yEnum.AA);
        localStorage.setItem('po-default-size', 'small');

        component['_size'] = undefined;
        expect(component.size).toBe('small');
      });

      it('should return medium when accessibility is AA and getA11yDefaultSize is medium', () => {
        document.documentElement.setAttribute('data-a11y', PoThemeA11yEnum.AA);
        localStorage.setItem('po-default-size', 'medium');

        component['_size'] = undefined;
        expect(component.size).toBe('medium');
      });

      it('should return medium when accessibility is AAA, regardless of getA11yDefaultSize', () => {
        document.documentElement.setAttribute('data-a11y', PoThemeA11yEnum.AAA);
        component['_size'] = undefined;
        expect(component.size).toBe('medium');
      });
    });

    describe('keysLabel', () => {
      it('should slice the array if it has more than 3 elements', () => {
        component.keysLabel = ['a', 'b', 'c', 'd', 'e'];
        expect(component.keysLabel).toEqual(['a', 'b', 'c']);
      });
    });
  });
});
